<div class="cv-view-viewinfo-date">
    <div ng-repeat="datefilter in view.params.datefilters" ng-controller="CubesViewerViewsCubeFilterDateController" ng-init="dimparts = view.cube.dimensionParts(datefilter.dimension);" class="label label-secondary cv-infopiece cv-view-viewinfo-cut text-left" style="color: black; background-color: #ffdddd; text-align: left;">
        <span style="max-width: 280px; white-space: nowrap;"><i class="fa fa-fw fa-filter"></i> <b class="hidden-xs hidden-sm">Filter:</b> {{ dimparts.labelNoLevel }}:</span>

        <!--
        <br class="hidden-sm hidden-md hidden-lg" />
        <i class="fa fa-fw hidden-sm hidden-md hidden-lg" />
         -->

        <div class="cv-datefilter" style="overflow: visible; display: inline-block;">

            <form class="form-inline">

                 <div class="form-group" style="display: inline-block; margin: 0px;">
                    <div class="dropdown" style="display: inline-block;">
                      <button ng-hide="view.getControlsHidden()" style="height: 20px;" class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" data-submenu>
                        <i class="fa fa-fw fa-calendar"></i> {{ datefilter.mode | datefilterMode }} <span class="caret"></span>
                      </button>
                      <span ng-show="view.getControlsHidden()"><i class="fa fa-fw fa-calendar"></i> {{ datefilter.mode | datefilterMode }}</span>

                      <ul class="dropdown-menu cv-view-menu cv-view-menu-view">
                        <li ng-click="setMode('custom')"><a><i class="fa fa-fw"></i> Custom</a></li>
                        <div class="divider"></div>
                        <li ng-click="setMode('auto-last1m')"><a><i class="fa fa-fw"></i> Last month</a></li>
                        <li ng-click="setMode('auto-last3m')"><a><i class="fa fa-fw"></i> Last 3 months</a></li>
                        <li ng-click="setMode('auto-last6m')"><a><i class="fa fa-fw"></i> Last 6 months</a></li>
                        <li ng-click="setMode('auto-last12m')"><a><i class="fa fa-fw"></i> Last year</a></li>
                        <li ng-click="setMode('auto-last24m')"><a><i class="fa fa-fw"></i> Last 2 years</a></li>
                        <li ng-click="setMode('auto-january1st')"><a><i class="fa fa-fw"></i> From January 1st</a></li>
                        <li ng-click="setMode('auto-yesterday')"><a><i class="fa fa-fw"></i> Yesterday</a></li>
                      </ul>
                  </div>
                 </div>

            <div ng-show="datefilter.mode == 'custom'" style="display: inline-block; margin: 0px;">

                 &rArr;

                 <div class="form-group" style="display: inline-block; margin: 0px;">
                    <p class="input-group disabled" style="margin: 0px; display: inline-block;">
                      <input ng-disabled="view.getControlsHidden()" autocomplete="off" type="text" style="height: 20px; width: 80px; display: inline-block;" class="form-control input-sm" uib-datepicker-popup="yyyy-MM-dd" ng-model="dateStart.value" is-open="dateStart.opened" datepicker-options="dateStart.options" ng-required="true" close-text="Close" />
                      <span ng-hide="view.getControlsHidden()"  class="input-group-btn" style="display: inline-block;">
                        <button type="button" style="height: 20px;" class="btn btn-default" ng-click="dateStartOpen()"><i class="fa fa-fw fa-calendar"></i></button>
                      </span>
                    </p>
                </div>

                <span ng-hide="view.getControlsHidden()" style="margin-left: 17px; margin-right: 0px;">-</span>
                <span ng-show="view.getControlsHidden()" style="margin-left: 0px; margin-right: 0px;">-</span>

                 <div class="form-group" style="display: inline-block; margin: 0px;">
                    <p class="input-group" style="margin: 0px; display: inline-block;">
                      <input ng-disabled="view.getControlsHidden()" autocomplete="off" type="text" style="height: 20px; width: 80px; display: inline-block;" class="form-control input-sm" uib-datepicker-popup="yyyy-MM-dd" ng-model="dateEnd.value" is-open="dateEnd.opened" datepicker-options="dateEnd.options" ng-required="true" close-text="Close" />
                      <span ng-hide="view.getControlsHidden()" class="input-group-btn" style="display: inline-block;">
                        <button type="button" style="height: 20px;" class="btn btn-default" ng-click="dateEndOpen()"><i class="fa fa-fw fa-calendar"></i></button>
                      </span>
                    </p>
                </div>

            </div>

        </form>

        </div>

        <button type="button" ng-hide="view.getControlsHidden()" ng-click="selectDateFilter(datefilter.dimension, false)" class="btn btn-danger btn-xs" style="margin-left: 20px;"><i class="fa fa-fw fa-trash"></i></button>
        <button type="button" class="btn btn-info btn-xs" style="visibility: hidden; margin-left: -20px;"><i class="fa fa-fw fa-info"></i></button>


    </div>
</div>

